<template>
  <navigation-bar />
  <el-row :gutter="20"  class="full-height">
    <el-col :span="5" class="side-text left-side">
      <h1 v-for="(char, index) in leftText" :key="index" class="big-char animated fadeInUp" :style="{ animationDelay: `${index * 0.3}s` }">{{ char }}</h1>
    </el-col>
    <el-col :span="14">

  <div class="resume-container">

    <!-- 简历头部 -->
    <h1 style="text-align: center">个人简历</h1>
    <header class="resume-header">
      <h2>个人信息</h2>
      <div class="input-group">
        <label for="nickname">姓名</label>
        <input
            id="nickname"
            v-model="personalInfo.nickname"
            placeholder="姓名"
            class="editable-input"
            :class="{ 'invalid': !isValidName }"
            @blur="validateName"
        />
        <span v-if="!isValidName" class="error-message">请输入有效的姓名</span>
      </div>

      <div class="input-group">
        <label for="title">求职意向</label>
        <input
            id="title"
            v-model="title"
            placeholder="职位"
            class="editable-input"
            :class="{ 'invalid': !isValidTitle }"
            @blur="validateTitle"
        />
        <span v-if="!isValidTitle" class="error-message">请输入有效的职位</span>
      </div>

      <div class="input-group">
        <label for="email">邮箱</label>
        <input
            id="email"
            v-model="personalInfo.email"
            placeholder="邮箱"
            class="editable-input"
            :class="{ 'invalid': !isValidEmail }"
            @blur="validateEmail"
        />
        <span v-if="!isValidEmail" class="error-message">请输入有效的邮箱地址</span>
      </div>

      <div class="input-group">
        <label for="phone">电话</label>
        <input
            id="phone"
            v-model="personalInfo.phone"
            placeholder="电话"
            class="editable-input"
            :class="{ 'invalid': !isValidPhone }"
            @blur="validatePhone"
        />
        <span v-if="!isValidPhone" class="error-message">请输入有效的电话号码</span>
      </div>
      <div class="input-group">
        <label for="age">年龄</label>
        <input
            id="age"
            v-model="age"
            placeholder="年龄"
            class="editable-input"
            disabled
        />
      </div>
    </header>

    <!-- 个人信息 -->
    <section class="resume-section">
      <h2>个人简介</h2>
      <textarea
          v-model="personalInfo.summary"
          placeholder="个人简介"
          class="editable-textarea"
      ></textarea>
    </section>

    <!-- 技能 -->
    <section class="resume-section">
      <h2>技能</h2>
      <ul class="skills-list">
        <li v-for="(skill, index) in skills" :key="index" class="skill-item">
          <input v-model="skills[index]" class="editable-input" />
          <button @click="removeSkill(index)" class="remove-button">删除</button>
        </li>
      </ul>
      <div class="input-group">
        <input v-model="newSkill" placeholder="新技能" class="editable-input" />
        <button @click="addSkill" class="add-button">添加技能</button>
      </div>
    </section>

    <!-- 教育背景 -->
    <section class="resume-section">
      <h2>教育背景</h2>
      <div v-for="(education, index) in educationHistory" :key="index" class="education-item">
        <div class="input-group">
          <label for="degree">学位</label>
          <input v-model="education.degree" placeholder="学位" class="editable-input" />
        </div>
        <div class="input-group">
          <label for="major">专业</label>
          <input v-model="education.major" placeholder="专业" class="editable-input" />
        </div>
        <div class="input-group">
          <label for="school">学校</label>
          <input v-model="education.schoolName" placeholder="学校" class="editable-input" />
        </div>
        <div class="input-group">
          <label for="year">年份</label>
          <input v-model="education.startDate" placeholder="入学时间" class="editable-input" />
          <input v-model="education.endDate" placeholder="毕业时间" class="editable-input" />
        </div>
        <button @click="removeEducation(index)" class="remove-button">删除</button>
      </div>
      <button @click="showEducationDialog = true" class="add-button">添加教育经历</button>

      <!-- 教育背景弹窗 -->
      <el-dialog
          title="添加教育经历"
          v-model="showEducationDialog"
          width="50%"
      >
        <div class="input-group">
          <label for="degree">学位</label>
          <input v-model="newEducation.degree" placeholder="学位" class="editable-input" />
        </div>
        <div class="input-group">
          <label for="major">专业</label>
          <input v-model="newEducation.major" placeholder="专业" class="editable-input" />
        </div>
        <div class="input-group">
          <label for="school">学校</label>
          <input v-model="newEducation.schoolName" placeholder="学校" class="editable-input" />
        </div>
        <div class="input-group">
          <label for="year">年份</label>
          <input v-model="newEducation.startDate" placeholder="入学时间" class="editable-input" />
          <input v-model="newEducation.endDate" placeholder="毕业时间" class="editable-input" />
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="showEducationDialog = false">取消</el-button>
            <el-button type="primary" @click="addEducationFromDialog">确定</el-button>
          </span>
        </template>
      </el-dialog>
    </section>

    <!-- 工作经验 -->
    <section class="resume-section">
      <h2>工作经验</h2>
      <div v-for="(experience, index) in workExperience" :key="index" class="experience-item">
        <div class="input-group">
          <label for="title">职位</label>
          <input v-model="experience.position" placeholder="职位" class="editable-input" />
        </div>
        <div class="input-group">
          <label for="company">公司</label>
          <input v-model="experience.companyName" placeholder="公司" class="editable-input" />
        </div>
        <div class="input-group">
          <label for="duration">工作时间</label>
          <input v-model="experience.startDate" placeholder="入职时间" class="editable-input" />
          <input v-model="experience.endDate" placeholder="离职时间" class="editable-input" />
        </div>
        <div class="input-group">
          <label for="description">工作描述</label>
          <textarea v-model="experience.jobContent" placeholder="工作描述" class="editable-textarea"></textarea>
        </div>
        <button @click="removeExperience(index)" class="remove-button">删除</button>
      </div>
      <button @click="showExperienceDialog = true" class="add-button">添加工作经历</button>

      <!-- 工作经验弹窗 -->
      <el-dialog
          title="添加工作经历"
          v-model="showExperienceDialog"
          width="50%"
      >
        <div class="input-group">
          <label for="title">职位</label>
          <input v-model="newExperience.position" placeholder="职位" class="editable-input" />
        </div>
        <div class="input-group">
          <label for="company">公司</label>
          <input v-model="newExperience.companyName" placeholder="公司" class="editable-input" />
        </div>
        <div class="input-group">
          <label for="duration">工作时间</label>
          <input v-model="newExperience.startDate" placeholder="入职时间" class="editable-input" />
          <input v-model="newExperience.endDate" placeholder="离职时间" class="editable-input" />
        </div>
        <div class="input-group">
          <label for="description">工作描述</label>
          <textarea v-model="newExperience.jobContent" placeholder="工作描述" class="editable-textarea"></textarea>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="showExperienceDialog = false">取消</el-button>
            <el-button type="primary" @click="addExperienceFromDialog">确定</el-button>
          </span>
        </template>
      </el-dialog>
    </section>

    <!-- 保存按钮和未保存提示 -->
    <button
        @click="saveResume"
        class="save-button"
        :disabled="!isFormValid"
    >
      保存简历
    </button>
    <p v-if="isUnsavedChanges" class="unsaved-changes-message">
      有未保存的更改，请记得保存。
    </p>
  </div>
    </el-col>
    <el-col :span="5" class="side-text right-side">
      <h1 v-for="(char, index) in rightText" :key="index" class="big-char animated fadeInUp" :style="{ animationDelay: `${index * 0.3}s` }">{{ char }}</h1>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref, reactive, computed, onMounted,watch } from 'vue';
import NavigationBar from '@/components/NavigationBar.vue';
import axios from "axios";
import html2canvas from "html2canvas";
const leftText = [ '牛', '马'];
const rightText = ['履', '历'];
const isPreview = ref(false);
const previewImageUrl = ref('');
const user = ref(getUser())
onMounted(() => {
  console.log('user的值：'+user.value.id)
  getUserInfo();
  getExperiences();
  getEducations();
    }
)
// 基本信息
const getUserInfo = () => {
  axios.get(BASEURL+'/admin/query?'+user.value.id)
  .then(response => {
    if (response.data.code === 2000) {
      personalInfo.value = response.data.data[0];
    }else {
      console.log(response.data.message);
    }
  })
};
const personalInfo = ref({
  nickname: '',
  email:'',
  phone:'',
  birthday:''
});
const title = ref('前端开发工程师');


// 技能
const skills = ref(['Vue.js', 'React', 'JavaScript', 'CSS', 'HTML']);
const newSkill = ref('');

// 教育背景
const educationHistory = ref([
  {
    degree:'',
    major: '',
    schoolName: '',
    startDate: '',
    endDate: '',
  }
]);
const showEducationDialog = ref(false);
const newEducation = reactive({
  degree: '',
  major: '',
  schoolName: '',
  startDate: '',
  endDate: '',
});

// 工作经验
const workExperience = ref([
  {
    position: '',
    companyName: '',
    startDate: '',
    endDate: '',
    jobContent: ''
  }
]);
const showExperienceDialog = ref(false);
const newExperience = reactive({
  position: '',
  companyName: '',
  startDate: '',
  endDate: '',
  jobContent: ''
});
// 计算年龄
const age = computed(() => {
  if (!personalInfo.value.birthday) return '';
  const birthDate = new Date(personalInfo.value.birthday);
  const today = new Date();
  let age = today.getFullYear() - birthDate.getFullYear();
  const monthDifference = today.getMonth() - birthDate.getMonth();
  if (monthDifference < 0 || (monthDifference === 0 && today.getDate() < birthDate.getDate())) {
    age--;
  }
  return age;
});
// 表单验证状态
const isValidName = ref(true);
const isValidTitle = ref(true);
const isValidEmail = ref(true);
const isValidPhone = ref(true);

// 验证函数
const validateName = () => {
  isValidName.value = !!personalInfo.value.nickname.value.trim();
};
const validateTitle = () => {
  isValidTitle.value = !!title.value.trim();
};
const validateEmail = () => {
  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  isValidEmail.value = emailPattern.test(personalInfo.value.email);
};
const validatePhone = () => {
  const phonePattern = /^\d{3}\d{3}\d{4}$/;
  isValidPhone.value = phonePattern.test(personalInfo.value.phone);
};

// 添加技能
const addSkill = () => {
  if (newSkill.value.trim()) {
    skills.value.push(newSkill.value.trim());
    newSkill.value = '';
  }
};

// 删除技能
const removeSkill = (index) => {
  skills.value.splice(index, 1);
};
//获取教育经历
const getEducations=()=>{
  axios.get(BASEURL+'/jobSeeker/selectEducation?id='+user.value.id).then((response)=>{
    if(response.data.code === 2000){
      educationHistory.value=response.data.data;
      console.log('获取到的教育经历:',educationHistory.value);
    }else{
      console.log(response.data.message);
    }
  })
}
// 添加教育经历
const addEducationFromDialog = () => {
  if (newEducation.degree && newEducation.major && newEducation.schoolName && newEducation.startDate&&newEducation.endDate) {
    educationHistory.value.push({ ...newEducation });
    newEducation.degree = '';
    newEducation.major = '';
    newEducation.schoolName = '';
    newEducation.startDate = '';
    newEducation.endDate = '';
    showEducationDialog.value = false;
  } else {
    alert('请填写所有字段');
  }
};

// 删除教育经历
const removeEducation = (index) => {
  educationHistory.value.splice(index, 1);
};
//获取工作经历
const getExperiences=()=>{
  axios.get(BASEURL+'/jobSeeker/selectExperience?id='+user.value.id).then((response)=>{
    if(response.data.code === 2000){
      workExperience.value=response.data.data;
      console.log('获取到的工作经验:',workExperience.value);
    }else{
      console.log(response.data.message);
    }
  })
}
// 添加工作经历
const addExperienceFromDialog = () => {
  if (newExperience.title && newExperience.company && newExperience.duration && newExperience.description) {
    workExperience.value.push({ ...newExperience });
    newExperience.title = '';
    newExperience.company = '';
    newExperience.duration = '';
    newExperience.description = '';
    showExperienceDialog.value = false;
  } else {
    alert('请填写所有字段');
  }
};

// 删除工作经历
const removeExperience = (index) => {
  workExperience.value.splice(index, 1);
};

// 保存简历
const saveResume = () => {
  console.log('保存简历:', {
    nickname: personalInfo.value.nickname,
    title: title.value,
    personalInfo: personalInfo,
    skills: skills.value,
    educationHistory: educationHistory.value,
    workExperience: workExperience.value
  });
  isUnsavedChanges.value = false;
};

// 表单有效性检查
const isFormValid = computed(() =>
    isValidName.value && isValidTitle.value && isValidEmail.value && isValidPhone.value
);

// 未保存更改提示
const isUnsavedChanges = ref(false);
watch(
    [personalInfo.value.nickname, title, personalInfo, skills, educationHistory, workExperience],
    () => {
      isUnsavedChanges.value = true;
    }
);

</script>

<style scoped>
.full-height {
  display: flex;
  align-items: stretch;
  min-height: 100vh; /* 确保至少占满整个视口高度 */
}
.resume-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.resume-header {
  margin-bottom: 20px;
}

.input-group {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.input-group label {
  width: 100%;
  margin-bottom: 5px;
}

.editable-input {
  flex: 1;
  padding: 8px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: border-color 0.3s;
}

.editable-input:focus {
  border-color: #409eff;
  outline: none;
}

.editable-input.invalid {
  border-color: red;
}

.editable-textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  height: 100px;
  transition: border-color 0.3s;
}

.editable-textarea:focus {
  border-color: #409eff;
  outline: none;
}

.skills-list {
  list-style-type: none;
  padding: 0;
}

.skill-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.add-button,
.remove-button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.add-button {
  background-color: #67c23a;
  color: #fff;
}

.add-button:hover {
  background-color: #85ce61;
}

.remove-button {
  background-color: #f56c6c;
  color: #fff;
}

.remove-button:hover {
  background-color: #f78989;
}

.save-button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: #409eff;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  margin-top: 15px;
  transition: background-color 0.3s;
}

.save-button:hover {
  background-color: #66b1ff;
}

.save-button:active {
  background-color: #337ab7;
}

.save-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.education-item,
.experience-item {
  margin-bottom: 20px;
}

.error-message {
  color: red;
  font-size: 12px;
  margin-left: 10px;
}

.unsaved-changes-message {
  color: orange;
  font-size: 14px;
  margin-top: 10px;
}
/* 美化左右两边的文字 */
.side-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 200vh;
  background: linear-gradient(to bottom, #4CAF50, #8BC34A);
  color: white;
  font-size: 48px;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  animation: fadeIn 2s ease-in-out;
}

.left-side {
  background: linear-gradient(to bottom, #FFC107, #FF9800);
}

.right-side {
  background: linear-gradient(to bottom, #2196F3, #0D47A1);
}
/* 添加动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 增加文字逐个出现的效果 */
.big-char {
  display: inline-block;
  opacity: 0;
  animation: fadeInChar 1s ease-in-out forwards;
}

@keyframes fadeInChar {
  to {
    opacity: 1;
  }
}
</style>
